<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box">
    <span>123123</span>
  </div>
</body>
<script>
  var box = document.getElementById("box");
  // 非表单获取和设置内容

  // innerHTML    获取和设置html结构 (只有纯文本也可以获取和设置)
  var html = box.innerHTML;   //"<span>123123</span>"
  console.log(html);

  // 变量html 存储的是获取的值(字符串)   => 能改变元素的只有元素本身
  // html = "<h2>4564566</h2>";  //重新对变量赋值
  // box.innerHTML = "<h2>4564566</h2>";

  // innerText    获取和设置文本结构  
  // 如果元素中有html结构 会忽略html结构 只获取文本
  // 如果设置html结构 会原样输出(不会解读为html标签,而是作为文本展示)

  // var text = box.innerText;
  // console.log(text);

  box.innerText = "<h2>4564566</h2>";
</script>

</html>